<template>
  <div class="menu skin3">
    <el-menu
      :default-active="activeIndex"
      class="item-wrapper"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-submenu
        :index="item.id"
        class="item"
        :popper-append-to-body="false"
        v-for="item in $store.state.dataList"
        :key="item.id"
      >
        <template slot="title">
          <div class="nav-img"></div>
          <div class="nav-title">{{ item.name }}</div>
        </template>
        <template v-for="item2 in item.list">
          <el-menu-item
            :index="item2.id"
            v-if="!item2.sonlist"
            :key="item2.id"
            >{{ item2.name }}</el-menu-item
          >
          <el-submenu :index="item2.id" v-else :key="item2.id">
            <template slot="title">{{ item2.name }}</template>
            <el-menu-item
              :index="item3.id"
              v-for="item3 in item2.sonlist"
              :key="item3.id"
              >{{ item3.name }}</el-menu-item
            >
          </el-submenu>
        </template>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key) {
      this.selectArrFn(key);
    },
    selectArrFn(str) {
      let arr = str.split("-");
      let obj = {};
      if (arr.length < 3) {
        obj = this.$store.state.dataList[arr[0]].list[arr[1]];
      } else {
        obj = this.$store.state.dataList[arr[0]].list[arr[1]].sonlist[arr[2]];
      }
      this.$store.commit("changeShowItemObj", obj);
      this.$emit("watchIframeFn");
    },
  },
};
</script>
<style scoped lang="scss">
.menu {
  width: 100%;
  height: 60px;
  .item-wrapper {
    display: flex;
    justify-content: space-between;
    border: none;
    align-content: center;
    /deep/.item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      // 展示的nav
      .el-submenu__title {
        display: flex;
        width: 140px;
        justify-content: center;
        align-items: center;
        border-bottom: none;
        .nav-img {
          margin-right: 10px;
          background-position: center center;
          background-size: cover;
          background-repeat: no-repeat;
        }
        .nav-title {
          font-size: 16px;
          font-weight: 600;
        }
        .el-submenu__icon-arrow {
          display: none;
        }
      }
      // 展示nav下的菜单栏
      .el-menu--horizontal {
        color: #909399;
        //有二级菜单的一级菜单的激活
        .el-submenu.is-active {
          .el-submenu__title {
            color: #303133;
          }
        }
        // 有二级菜单的一级菜单hover效果
        .el-submenu__title:hover {
          background-color: transparent !important;
        }
        // 有二级菜单的一级菜单
        .el-submenu__title {
          justify-content: space-between;
          color: #909399;
          &:hover {
            color: #303133;
          }
          .el-submenu__icon-arrow {
            display: block;
          }
        }
      }
      & > .el-menu--horizontal {
        left: 0 !important;
      }
    }
  }
  // 皮肤2
  &.skin3 {
    .item-wrapper {
      background-color: transparent;
      /deep/.item {
        &.el-submenu {
          .el-submenu__title:hover {
            background-color: rgba(44, 252, 254, 0.2);
          }
        }
        &:first-child {
          .el-submenu__title {
            .nav-img {
              background-image: url("../../../assets/images/skin3-shuju.png");
            }
          }
        }
        &:nth-child(2) {
          .el-submenu__title {
            .nav-img {
              background-image: url("../../../assets/images/skin3-zhineng.png");
            }
          }
        }
        &:nth-child(3) {
          .el-submenu__title {
            .nav-img {
              background-image: url("../../../assets/images/skin3-yewu.png");
            }
          }
        }
        &:nth-child(4) {
          .el-submenu__title {
            .nav-img {
              background-image: url("../../../assets/images/skin3-fenxi.png");
            }
          }
        }
        // 展示的nav
        .el-submenu__title {
          .nav-img {
            width: 24px;
            height: 24px;
          }
          .nav-title {
            color: #fff;
            font-weight: 600;
          }
        }
        // 展示nav下的菜单栏
        .el-menu--horizontal {
          background-color: #022956;
          //有二级菜单的一级菜单的激活
          .el-submenu.is-active {
            .el-submenu__title {
              background-color: #10436c !important;
            }
          }
          .el-menu {
            background-color: transparent;
            .el-submenu {
              background-color: transparent;
              .el-submenu__title {
                background-color: transparent;
                color: #fff;
              }
            }
            .el-menu-item {
              background-color: #022956;
              color: #fff;
              &.is-active {
                background-color: #10436c !important;
              }
            }
          }
          // 有二级菜单的一级菜单
          .el-submenu__title {
            justify-content: space-between;
            width: auto;
          }
          .el-submenu__title:hover {
            background-color: #10436c !important;
          }
        }
        .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
        .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
          background-color: #10436c;
        }
      }
    }
  }
}
</style>
